import React, {useState, useEffect} from 'react';
import { Result, Icon, NavBar ,Modal} from 'antd-mobile';
import {withRouter} from 'react-router-dom'


import "./result.scss"

const confirm = Modal.alert;
/**
 * 支付失败的结果页
 * @param props
 * @constructor
 */
function FailPay(props) {
    console.log("props--->", props);
    let [message, setMessage] = useState(() => {
        return (<div>糟糕，支付未成功</div>)
    });


    useEffect(()=>{
        setMessage((<div>{props.location.query.message}</div>));
    }, []);
    const myImg = src => <img src={src} className="spe am-icon am-icon-md" alt="" />;
    const ResultExample = () => (<div className="result-example">
        <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() =>  props.history.goBack()}
        > 支付结果</NavBar>
        <Result
            buttonText={"确定"}
            img={<Icon type="cross-circle-o" className="spe" style={{ fill: '#F13642' }} />}
            title="支付失败"
            message={message}
            buttonType="primary"
            onButtonClick={()=> {
                if(props.location.query.call){
                    props.location.query.call();
                }else {
                    props.history.goBack();
                }
            }}
        />
    </div>);
    return (ResultExample());
}

export default withRouter(FailPay);